<template>
  <div class="indexRecommendTitleControl">
    <div class="control-section">
      <div class="control-header">
        <span>首页推荐</span>
      </div>
      <div class="control-body">
        <div class="control-item">
          <div class="control-title">模板样式</div>
          <div class="control-content">
            <div class="example-list">
              <div
                :class="['example-item', params.style == 1 ? 'choose' : '']"
                @click.stop="params.style = 1"
              >
                <i class="iconfont icon-fangkuaiyangshi"></i>
              </div>
              <div
                :class="['example-item', params.style == 2 ? 'choose' : '']"
                @click.stop="params.style = 2"
              >
                <i class="iconfont icon-beijingyangshi"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="control-item" v-if="params.style == 1">
          <div class="control-title">开始时间</div>
          <div class="control-content">
            <div class="chooseTime">
              <img src="@/assets/images/diy/index_time.png" alt="">
              <a-date-picker
                :show-time="{use12Hours:false}"
                placeholder="选择开始时间"
                :value="params.startTime"
                @change="chooseStart"
                format="YYYY-MM-DD HH:mm:ss"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                style="flex:auto;"
              >
                <span slot="suffixIcon" />
              </a-date-picker>
            </div>
          </div>
        </div>
        <div class="control-item" v-if="params.style == 1">
          <div class="control-title">结束时间</div>
          <div class="control-content">
            <div class="chooseTime">
              <img src="@/assets/images/diy/index_time.png" alt="">
              <a-date-picker
                :show-time="{use12Hours:false}"
                placeholder="选择结束时间"
                :value="params.endTime"
                format="YYYY-MM-DD HH:mm:ss"
                @change="chooseEnd"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                style="flex:auto;"
              >
                <span slot="suffixIcon" />
              </a-date-picker>
            </div>
          </div>
        </div>
        <uploadImg v-if="params.style == 2" size="不限*34px" :uploadImg="params.picUrl" @deleteImg="params.picUrl = ''" :title="'添加图片'" @uploadSuccess="uploadSuccess"></uploadImg>
      </div>
    </div>
  </div>
</template>

<script>
import uploadImg from "@/components/DiyNew/uploadImg/index.vue";
export default {
  name: "indexRecommendTypeControl",
  components: {
      uploadImg
  },
  props: {
    params: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  methods: {
      uploadSuccess(e) {
          // this.params.picUrl = e.val
          this.$setWithAction(this.params, "picUrl", e.val)
      },
      chooseStart(e) {
        this.$setWithAction(this.params, "startTime", e)
      },
      chooseEnd(e) {
        this.$setWithAction(this.params, "endTime", e)
      }
  },
};
</script>

<style lang="scss" scoped>
.indexRecommendTitleControl {
  height: calc(100vh - 54px);
  padding-bottom: 20px;
  ::-webkit-scrollbar {
    height: 0 !important;
    width: 0px !important;
  }
}
.control-section {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 100%;
  position: relative;
  .control-header {
    width: 100%;
    height: 48px;
    background: #ffffff;
    border-bottom: 1px solid #f0f2f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    span:first-child {
      font-weight: 600;
      color: #000000;
    }
  }
  .control-body {
    flex: auto;
    height: 0;
    overflow: auto;
    width: 228px;
    margin: 0 auto;
    .control-item {
      width: 100%;
      .control-title {
        padding: 24px 0 14px 0;
        font-size: 12px;
        color: #000000;
        text-align: left;
      }
      .flex-between {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .reset {
        font-size: 12px;
        color: #9e9e9e;
        cursor: pointer;
      }
      .control-content {
        .example-list {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          .example-item {
            position: relative;
            width: 70px;
            height: 70px;
            background: #f6f7f9;
            border-radius: 4px;
            margin-right: 9px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            overflow: hidden;
            .iconfont {
              font-size: 60px;
            }
          }
          .choose::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            border: 2px solid #1890fc;
            border-radius: 4px;
          }
          .example-item:nth-child(3n) {
            margin-right: 0;
          }
        }
        .border-select,
        .fixed-top-select {
          width: 100%;
          height: 100%;
          ::v-deep .ant-select-selection--single {
            height: 100%;
            border: 0 none;
            background: #f2f2f2;
          }
          ::v-deep .ant-select-selection__rendered {
            line-height: 40px;
          }
        }
        .keyword-input {
          width: 228px;
          height: 40px;
          background: #f6f7f9;
          border-radius: 4px;
          input {
            height: 100%;
            background-color: #f6f7f9;
            border: 0 none;
          }
        }
      }
    }
  }
}
.chooseTime {
  display: flex;
  align-items: center;
  background-color: #f6f7f9;
  border-radius: 4px;
  padding: 5px 15px;
  img {
      width: 18px;
      min-width: 18px;
      height: 18px;
  }
  ::v-deep input {
    border: none;
    background-color: #f6f7f9;
  }
}
</style>